<template>
    <div class="lgp_app" style="">
       <el-form ref="form" :model="form" label-width="80px"  style="width:98%"  >
            <el-form-item label="商品链接">
                <el-input v-model="form.target" v-on:blur="get_goods_info(form.target)" placeholder="请手动输入正确的请正淘宝/天猫/拼多多商品链接，输入错误链接会导致发布失败"></el-input>
            </el-form-item>
            <el-form-item label="商品标题">
                <el-input v-model="form.title" placeholder="请手动填写宝贝链接的商品全标题，商品链接与标题不匹配将导致任务发布失败"></el-input>
            </el-form-item>
            <el-row v-for="(field,index1) in form.field" :key="index1">
                <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="1">
                    <p style="font-size: 40px;color:#1d87f7;"><i class="el-icon-circle-plus-outline"
                                                                 v-on:click="add_field"></i></p>
                    <p style="font-size: 40px;color:#1d87f7;"><i class="el-icon-remove-outline"
                                                                 v-on:click="del_field(index1)"></i></p>
                </el-col>
                <el-col :xs="20" :sm="20" :md="20" :lg="22" :xl="23"
                        style="border:1px solid #1d87f7;padding-top:30px;padding-right: 30px;margin-bottom: 30px;">
                    <el-form-item label="关键词" >
                        <el-row>

                            <el-col :span="11">
                                <el-input v-model="field.keyword"  placeholder=""></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-row :gutter="10">
                        <el-col :xs="11" :sm="11" :md="11" :lg="12">
                            <el-form-item label="发布量">
                                <el-input v-model="field.count" v-on:input="count_change(index1)" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>



                    </el-row>
                    <el-form-item label="24小时细分">
                        <el-row :gutter="10" style="margin: 0;">
                            <el-col :xs="6" :sm="3" :md="1" :lg="1" v-for="(te,index) in field.hour "
                                    :key="index">
                                <div class="split_time">
                                    <span class="hour_title">{{index}}</span>
                                    <el-input v-model="field['hour'][index]"  v-on:input="time_change(index1)"
                                              placeholder="点"
                                              class="split_time_input"></el-input>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :offset="1" :xs="8" :sm="6" :md="24" :lg="24" :xl="20">
                    <el-row>
                        <el-col :xs="8" :sm="6" :md="4" :lg="6" :xl="5">
                            <el-form-item label="停留时间">
                                <el-select v-model="form.browse_time" placeholder="请选择活停留时间">
                                    <el-option label="100秒-180秒(免费赠送)" value="100-180"></el-option>
                                    <el-option label="180秒-280秒(免费赠送)" value="180-280"></el-option>
                                    <el-option label="280秒-380秒(免费赠送)" value="280-380"></el-option>
                                    <el-option label="280秒-380秒(免费赠送)" value="280-380"></el-option>

                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="8" :sm="6" :md="4" :lg="6" :xl="5">
                            <el-form-item label="浏览宝贝">
                                <el-select v-model="form.depth" placeholder="请选择">
                                    <el-option label="不浏览" value="0"></el-option>
                                    <el-option label="随机浏览" value="1"></el-option>
                                    <el-option label="深度浏览" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="8" :sm="6" :md="4" :lg="6" :xl="5">
                            <el-form-item label="访问模式" >
                                <el-select v-model="form.shopVisit" placeholder="请选择店铺访问模式">
                                    <el-option label="按销量" value="sales"></el-option>
                                    <el-option label="按收藏" value="favos"></el-option>
                                    <el-option label="按全部品类" value="cates"></el-option>
                                    <el-option label="不访问" value="no"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="8" :sm="6" :md="4" :lg="6" :xl="5">
                            <el-form-item label="查看评价">
                                <el-select v-model="form.check_commit" placeholder="请选择活动区域">
                                    <el-option label="查看" value="1"></el-option>
                                    <el-option label="不查看" value="2"></el-option>
                                </el-select>

                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-form-item label="发布天数">
                <el-row :gutter="10">
                    <el-col :lg="5">
                        <el-input v-model="form.send_day"></el-input>
                    </el-col>
                    <el-col :lg="8">
                          <el-button type="primary" @click="cilck1">7天</el-button>
                        <el-button type="primary" @click="cilck2">15天</el-button>
                        <el-button type="primary" @click="cilck3">30天</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker
                        v-model="form.begin_time"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        size="small"
                />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onsubmit">发布任务</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
  import { task_add ,get_goods_info } from '@/api/task'
  const field = {
    count: 100,
    show: 100,
    sign: 'b4b0cf9a00b17c0f432420407a9ea6',
    keyword: '',
    hour: Array(24).fill(0),
  }
  export default {
    data() {
      return {
        keyword:[],
        form: {
          target: '',
          title: '',
          field: [field],
          begin_time: new Date(),
          send_day:1,
          browse_time: '100-180',
          check_commit: '1',
          depth: '1',
           shopVisit:'sales',
        }
      }
    },
    onSubmit() {
      for (var a in this.form.field)
        var obj = this.form.field[a].hour.join(',')
      const all =  Object.assign(this.form.field[a],this.form)
      app_flow({
        target: all.target,
        send_day :all.send_day,
        begin_time :all.begin_time,
        shopVisit : all.shopVisit,
        depth :all.depth,
        browse_time :all.browse_time,
        count :all.field[a].count,
        keyword :all.field[a].keyword,
        hour :obj,
        sign:all.field[a].sign}).then(response => {
        console.log(response)
      }).catch(
        function(error){
          console.log(error)
        }
      )
    },
    methods: {
      add_field() {
        this.form.field.push({
          count: 100,
          send_day: 1,
          begin_time: '',
          show: 100,
          keyword: '',
          hour: Array(24).fill(0),
          check_commit: '1',
          depth: '1',
          browse_time: '100-180'
        })
      },
      time_change(index) {
        let field = this.form.field
        let hour = field[index].hour
        let time_count = hour.reduce( (accumulator, currentValue) =>parseInt(accumulator)+ parseInt(currentValue))
        field[index].count = time_count;
        field[index].show=time_count
      },
      count_change(index){
        let bg_time = this.form.begin_time
        const date = new Date();
        const chooser_date =  new Date(bg_time); // 选中时间
        let  time_splits = date.getHours() // 获取当前小时
        const current_day =  date.getDate() // 获取当前录入日期的天
        const chooser_day =  chooser_date.getDate()

        let offset  = (current_day === chooser_day ?  time_splits  :  0);

        let field = this.form.field
        let count = field[index].count
        let each_num = Math.floor(count/(24-offset-1));
        field[index].hour.fill(0);
        if (offset!==0){
          for (let i = offset+1; i <24; i++) {
            field[index].hour[i] = each_num;
          }
          field[index].show=count
          let x =count-each_num*(24-offset-1);
          for (let i = 0; i <x ; i++) {
            field[index].hour[i+offset+1]+=1;
          }
        }else{
          for (let i = offset; i <24; i++) {
            field[index].hour[i] = each_num;
          }
          field[index].show=count
          let x =count-each_num*(24-offset);
          for (let i = 0; i <x ; i++) {
            field[index].hour[i+offset]+=1;
          }
        }
        console.log(eval(field[index].hour.join('+')));

      },
      get_goods_info(url){
        get_goods_info({'url':url}).then(result => {
          console.log(result)
          this.form.title = result['data']['description'];
          let this_ = this;
          this.keyword= result['data']['keywords'].split(',');
        }).catch(error => {
          this.form.title ='';
          this.keyword ='';
        })
      },
       del_field(i) {
        if (i) {
          this.form.field.splice(i, 1)
        }
      },
      cilck1(){
        this.form.send_day = 7
      },
      cilck2(){
        this.form.send_day = 15
      },
      cilck3(){
        this.form.send_day = 30
      },
      onsubmit(){
        task_add(this.form)
      }
    }
  }
</script>
<style>
    .lgp_app {
        padding: 0 20px;
    }

    .split_time {
        line-height: 25px;
        border: 1px solid #409EFF;
        margin-bottom: 10px;
        border-radius: 12px;
    }
    .hour_title {
        text-align: center;
        display: inline-block;
        width: 100%;
        border: 1px solid #cccccc;
        background-color: #409EFF;
        color: #ffffff;
        height: 25px;
        border-radius: 12px 12px 0 0;
        margin-bottom: 0;

        padding-bottom: 0;
    }

    .split_time_input input {
        padding: 0 6px;
        border: 0;
        height: 15px;
        border-radius: 0 0 12px 12px;
        text-align: center;
    }


</style>
